import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { AtButton, AtModal } from 'taro-ui'
import './index.scss'

const ActivityDetails = () => {
  const [isFree] = useState(false)
  const [isOpened, setisOpened] = useState(false)

  const handleClose = () => {
    setisOpened(false)
  }

  // 选择支付
  const handlePay = () => {
    handleClose()
    console.log('选择支付')
    Taro.showToast({
      title: '支付成功',
      icon: 'success',
      mask: true,
      duration: 1500
    })
  }

  // 选择报名
  const handleSignUp = () => {
    handleClose()
    console.log('选择报名')
    Taro.showToast({
      title: '报名成功',
      icon: 'success',
      mask: true,
      duration: 1500
    })
  }

  // 选择加入收藏
  const handleConfirm = () => {
    handleClose()
    console.log('选择加入收藏')
  }

  return (
    <View className='details'>
      <View className='detail-top'>
        <View className='name'>Las Vegas DDC 2017</View>
        <View className='date'>时间：2017-02-26</View>
        <View className='place'>地点：广州 天河区</View>
        <View className='cost'>费用：免费</View>
        <View className='type'>类型：大赛活动</View>
        <View className='sponsor'>主办方：微谷众创社区</View>
      </View>
      <View className='detail-content'>
        <View className='title'>活动详情：</View>
        <View className='decs'>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Aenean euismod bibendum laoreet.
          Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
          Proin sodales pulvinar tempor.
          Cum sociis natoque penatibus et magnis dis parturient montes,
          nascetur ridiculus mus.
          Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus sapien nunc eget.
          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          Aenean euismod bibendum laoreet.
          Proin gravida dolor sit amet lacus accumsan et viverra justo commodo.
          Proin sodales pulvinar tempor. Cum sociis natoque penatibus et
        </View>
      </View>
      <View className='detail-imgs'>
        <View className='img'>图片</View>
      </View>
      <AtButton type='primary' className='activity-btn'>
        活动链接
      </AtButton>
      <AtButton type='primary' onClick={() => setisOpened(true)}>报名参加</AtButton>
      <AtModal
        isOpened={isOpened}
        cancelText={`${isFree ? '马上报名' : '现在支付'}`}
        confirmText='加入收藏'
        onClose={handleClose}
        onCancel={isFree ? handleSignUp: handlePay}
        onConfirm={handleConfirm}
        title={`${isFree ? '免费' : '参与此活动需要支付费用XXX元\n是否现在支付'}`}
      />
    </View>
  )
}

export default ActivityDetails
